<script setup lang="ts">
import { ref } from 'vue';

import { message } from 'ant-design-vue';

import AccountEntryModal from './components/AccountEntryModal.vue';
import AddNotesModal from './components/AddNotesModal.vue';
import BatchModifyModal from './components/BatchModifyModal.vue';
import ChangeRoomModal from './components/ChangeRoomModal.vue';
import CheckInModal from './components/CheckInModal.vue';
import CheckOutModal from './components/CheckOutModal.vue';
import ModifyStatusModal from './components/ModifyStatusModal.vue';
// 导入模态框组件
import OpenRoomModal from './components/OpenRoomModal.vue';
import ReplenishCardModal from './components/ReplenishCardModal.vue';

// 演示房间数据
const demoRoom = ref({
  id: '1',
  number: '1001',
  type: '休息室',
  status: 'vacant',
  capacity: 5,
  occupied: 0,
  openTime: '12/24 22:12',
  handCard: '2003男宾',
  notes: 'VIP客户',
});

// 模态框状态
const modals = ref({
  openRoom: false,
  modifyStatus: false,
  checkOut: false,
  changeRoom: false,
  accountEntry: false,
  addNotes: false,
  replenishCard: false,
  batchModify: false,
  checkIn: false,
});

// 显示模态框的方法
const showOpenRoomModal = () => {
  modals.value.openRoom = true;
  message.info('演示开房功能');
};

const showModifyStatusModal = () => {
  modals.value.modifyStatus = true;
  message.info('演示修改房态功能');
};

const showCheckOutModal = () => {
  modals.value.checkOut = true;
  message.info('演示退房功能');
};

const showChangeRoomModal = () => {
  modals.value.changeRoom = true;
  message.info('演示换房功能');
};

const showAccountEntryModal = () => {
  modals.value.accountEntry = true;
  message.info('演示入账功能');
};

const showAddNotesModal = () => {
  modals.value.addNotes = true;
  message.info('演示添加备注功能');
};

const showReplenishCardModal = () => {
  modals.value.replenishCard = true;
  message.info('演示补卡功能');
};

const showBatchModifyModal = () => {
  modals.value.batchModify = true;
  message.info('演示批量修改功能');
};

const showCheckInModal = () => {
  modals.value.checkIn = true;
  message.info('演示入住功能');
};
</script>

<template>
  <div class="room-status-demo">
    <a-card title="房态中心功能演示" :bordered="false">
      <a-row :gutter="24">
        <a-col :span="12">
          <a-card title="主要功能" size="small">
            <ul>
              <li>
                <strong>房间状态管理：</strong
                >实时显示房间状态（空闲、占用、禁用、脏房、将离等）
              </li>
              <li>
                <strong>房型筛选：</strong
                >支持按休息室、棋牌室、VIP休息室、客房等筛选
              </li>
              <li><strong>状态筛选：</strong>快速筛选不同状态的房间</li>
              <li><strong>开房功能：</strong>为房间分配手牌和客人信息</li>
              <li><strong>退房功能：</strong>结算费用并释放房间</li>
              <li><strong>换房功能：</strong>将客人从当前房间换到其他房间</li>
              <li><strong>入账功能：</strong>记录房间消费项目和金额</li>
              <li><strong>补卡功能：</strong>为丢失或损坏的手牌补办新卡</li>
              <li><strong>批量操作：</strong>支持批量修改房间状态</li>
              <li><strong>入住功能：</strong>客房入住登记</li>
            </ul>
          </a-card>
        </a-col>

        <a-col :span="12">
          <a-card title="房间状态说明" size="small">
            <a-descriptions :column="1" size="small">
              <a-descriptions-item label="空闲">
                <a-tag color="default">灰色</a-tag> 房间可用，等待客人使用
              </a-descriptions-item>
              <a-descriptions-item label="占用">
                <a-tag color="success">绿色</a-tag> 房间正在使用中
              </a-descriptions-item>
              <a-descriptions-item label="禁用">
                <a-tag color="purple">紫色</a-tag> 房间暂时不可用
              </a-descriptions-item>
              <a-descriptions-item label="脏房">
                <a-tag color="brown">棕色</a-tag> 房间需要清洁
              </a-descriptions-item>
              <a-descriptions-item label="将离">
                <a-tag color="warning">黄色</a-tag> 客人即将退房
              </a-descriptions-item>
              <a-descriptions-item label="钟点房">
                <a-tag color="blue">蓝色</a-tag> 按小时计费的房间
              </a-descriptions-item>
              <a-descriptions-item label="凌晨房">
                <a-tag color="cyan">青色</a-tag> 凌晨时段使用的房间
              </a-descriptions-item>
            </a-descriptions>
          </a-card>
        </a-col>
      </a-row>

      <a-divider />

      <a-card title="功能演示" size="small">
        <a-space wrap>
          <a-button type="primary" @click="showOpenRoomModal">
            开房演示
          </a-button>
          <a-button type="primary" @click="showModifyStatusModal">
            修改房态演示
          </a-button>
          <a-button type="primary" @click="showCheckOutModal">
            退房演示
          </a-button>
          <a-button type="primary" @click="showChangeRoomModal">
            换房演示
          </a-button>
          <a-button type="primary" @click="showAccountEntryModal">
            入账演示
          </a-button>
          <a-button type="primary" @click="showAddNotesModal">
            添加备注演示
          </a-button>
          <a-button type="primary" @click="showReplenishCardModal">
            补卡演示
          </a-button>
          <a-button type="primary" @click="showBatchModifyModal">
            批量修改演示
          </a-button>
          <a-button type="primary" @click="showCheckInModal">
            入住演示
          </a-button>
        </a-space>
      </a-card>
    </a-card>

    <!-- 模态框组件 -->
    <OpenRoomModal v-model:visible="modals.openRoom" :room="demoRoom" />
    <ModifyStatusModal v-model:visible="modals.modifyStatus" :room="demoRoom" />
    <CheckOutModal v-model:visible="modals.checkOut" :room="demoRoom" />
    <ChangeRoomModal v-model:visible="modals.changeRoom" :room="demoRoom" />
    <AccountEntryModal v-model:visible="modals.accountEntry" :room="demoRoom" />
    <AddNotesModal v-model:visible="modals.addNotes" :room="demoRoom" />
    <ReplenishCardModal
      v-model:visible="modals.replenishCard"
      :room="demoRoom"
    />
    <BatchModifyModal v-model:visible="modals.batchModify" />
    <CheckInModal v-model:visible="modals.checkIn" />
  </div>
</template>

<style scoped>
.room-status-demo {
  min-height: 100vh;
  padding: 24px;
  background: #f5f5f5;
}

.room-status-demo .ant-card {
  margin-bottom: 16px;
}

.room-status-demo ul {
  padding-left: 20px;
  margin: 0;
}

.room-status-demo li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.room-status-demo .ant-descriptions-item-label {
  width: 80px;
  font-weight: bold;
}
</style>
